<template>
  <el-card class="mt-10">
    <div id="BMapContainer"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";

onMounted(() => {
  const script = document.createElement("script");

  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ELL6dBaTnC9yLFMGMMlqgx4IgxQIhV3z&callback=initBMap";

  document.body.append(script);
});

window.initBMap = () => {
  const map = new BMapGL.Map("BMapContainer"); // 创建地图实例
  const point = new BMapGL.Point(106.58081, 29.55707); // 创建点坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

  const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
  map.addControl(cityCtrl);
};
</script>

<style scoped>
.mt-10 {
  margin-top: 10px;
}

#BMapContainer {
  height: 600px;
}
</style>
